<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>chat组件界面 | JwChat</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="languages is all">
    <meta name="keywords" content="vue,im,IM,聊天组件,vue组件">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="descriptione" content="基于vue开发的仿QQ聊天组件">
    
    <link rel="preload" href="/jwchatdoc/assets/css/0.styles.88dd726d.css" as="style"><link rel="preload" href="/jwchatdoc/assets/js/app.2f005bd9.js" as="script"><link rel="preload" href="/jwchatdoc/assets/js/2.0a6120b0.js" as="script"><link rel="preload" href="/jwchatdoc/assets/js/5.cab4c999.js" as="script"><link rel="prefetch" href="/jwchatdoc/assets/js/10.69421091.js"><link rel="prefetch" href="/jwchatdoc/assets/js/11.7a399bd7.js"><link rel="prefetch" href="/jwchatdoc/assets/js/12.99033945.js"><link rel="prefetch" href="/jwchatdoc/assets/js/13.279bab3c.js"><link rel="prefetch" href="/jwchatdoc/assets/js/14.2f230c3a.js"><link rel="prefetch" href="/jwchatdoc/assets/js/15.f9aa9fc4.js"><link rel="prefetch" href="/jwchatdoc/assets/js/16.3ba8d5b4.js"><link rel="prefetch" href="/jwchatdoc/assets/js/17.e53d4f10.js"><link rel="prefetch" href="/jwchatdoc/assets/js/18.bce088f4.js"><link rel="prefetch" href="/jwchatdoc/assets/js/19.f51d6632.js"><link rel="prefetch" href="/jwchatdoc/assets/js/20.15eb3f0e.js"><link rel="prefetch" href="/jwchatdoc/assets/js/21.a1303875.js"><link rel="prefetch" href="/jwchatdoc/assets/js/3.55e62092.js"><link rel="prefetch" href="/jwchatdoc/assets/js/4.9bd699fc.js"><link rel="prefetch" href="/jwchatdoc/assets/js/6.93ce79e4.js"><link rel="prefetch" href="/jwchatdoc/assets/js/7.6a0b259c.js"><link rel="prefetch" href="/jwchatdoc/assets/js/8.4b5ca820.js"><link rel="prefetch" href="/jwchatdoc/assets/js/9.c7a03d0b.js">
    <link rel="stylesheet" href="/jwchatdoc/assets/css/0.styles.88dd726d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/jwchatdoc/" class="home-link router-link-active"><!----> <span class="site-name">JwChat</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/jwchatdoc/guide/" class="nav-link">
  使用
</a></div><div class="nav-item"><a href="/jwchatdoc/component/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/jwchatdoc/updateTip/" class="nav-link">
  更新
</a></div><div class="nav-item"><a href="https://gitee.com/CodeGI/chat" target="_blank" rel="noopener noreferrer" class="nav-link external">
  项目地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://codegi.gitee.io/jwchatdoc/demo/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Demo
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/jwchatdoc/guide/" class="nav-link">
  使用
</a></div><div class="nav-item"><a href="/jwchatdoc/component/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/jwchatdoc/updateTip/" class="nav-link">
  更新
</a></div><div class="nav-item"><a href="https://gitee.com/CodeGI/chat" target="_blank" rel="noopener noreferrer" class="nav-link external">
  项目地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://codegi.gitee.io/jwchatdoc/demo/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Demo
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/jwchatdoc/component/chat.html" class="sidebar-link">基础组件 Chat</a></li><li><a href="/jwchatdoc/component/chatIndex.html" aria-current="page" class="active sidebar-link">chat组件界面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/jwchatdoc/component/chatIndex.html#jwchat-index" class="sidebar-link">JwChat-index</a></li><li class="sidebar-sub-header"><a href="/jwchatdoc/component/chatIndex.html#参数配置" class="sidebar-link">参数配置</a></li></ul></li><li><a href="/jwchatdoc/component/rightbox.html" class="sidebar-link">右边栏-仿QQ群</a></li><li><a href="/jwchatdoc/component/talk.html" class="sidebar-link">快捷回复组件</a></li><li><a href="/jwchatdoc/component/user.html" class="sidebar-link">用户组件</a></li><li><a href="/jwchatdoc/component/empty.html" class="sidebar-link">empty组件</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="chat组件界面"><a href="#chat组件界面" class="header-anchor">#</a> chat组件界面</h1> <h2 id="jwchat-index"><a href="#jwchat-index" class="header-anchor">#</a> JwChat-index</h2> <div style="margin:1rem 0;"></div> <div style="margin:20px 0;"><button type="button" class="el-button el-button--primary el-button--mini is-plain"><!----><!----><span>关闭会话列表</span></button> <button type="button" class="el-button el-button--danger el-button--mini is-plain"><!----><!----><span>关闭右侧组件</span></button> <button type="button" class="el-button el-button--success el-button--mini is-plain"><!----><!----><span>切换防QQ组件</span></button></div> <JwChat-index taleList="" scrollType="noroll" toolConfig="[object Object]" placeholder="欢迎使用JwChat...(最多输入30字)" config="[object Object]" winBarConfig="[object Object]" showRightBox="true"><JwChat-rightbox config="[object Object]" class="rightSlot"></JwChat-rightbox></JwChat-index> <details class="custom-block details"><summary>点击查看代码</summary> <div class="language-vue extra-class"><pre class="language-vue"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>JwChat-index</span>
  <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>jwChat<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputMsg<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:taleList</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>taleList<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:scrollType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scrollType<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:toolConfig</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tool<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>placeholder<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:config</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>config<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:winBarConfig</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>winBarConfig<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:showRightBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showRightBox<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bindEnter<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@clickTalk</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>talkEvent<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- &lt;template slot=&quot;enter&quot;&gt;
    &lt;div&gt;自定义输入框&lt;/div&gt;
  &lt;/template&gt; --&gt;</span>
  <span class="token comment">&lt;!-- &lt;template slot=&quot;enterBtn&quot;&gt;
    &lt;div&gt;自定义按钮&lt;/div&gt;
  &lt;/template&gt; --&gt;</span>
  <span class="token comment">&lt;!-- &lt;template #downBtn=&quot;{unread}&quot;&gt;
    &lt;div&gt;
      未读{{unread}}
    &lt;/div&gt;
  &lt;/template&gt; --&gt;</span>
  <span class="token comment">&lt;!-- &lt;JwChat-rightbox
    class=&quot;rightSlot&quot;
    :config=&quot;rightConfig&quot;
    @click=&quot;rightClick&quot;
  /&gt; --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>JwChat-talk</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rightSlot<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:Talelist</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>talk<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:config</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>quickConfig<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bindTalk<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token comment">&lt;!-- &lt;template slot=&quot;tools&quot;&gt;
    &lt;div style=&quot;width: 20rem; text-align: right&quot; @click=&quot;toolEvent(12)&quot;&gt;
      &lt;JwChat-icon type=&quot;icon-lishi&quot; title=&quot;自定义&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt; --&gt;</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>JwChat-index</span><span class="token punctuation">&gt;</span></span>


<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      scrollType<span class="token operator">:</span> <span class="token string">'noroll'</span><span class="token punctuation">,</span> <span class="token comment">// scroll  noroll 俩种类型</span>
      placeholder<span class="token operator">:</span> <span class="token string">&quot;欢迎使用JwChat...(最多输入30字)&quot;</span><span class="token punctuation">,</span>
      inputMsg<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
      taleList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      tool<span class="token operator">:</span> <span class="token punctuation">{</span>
        callback<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>toolEvent
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      config<span class="token operator">:</span> <span class="token punctuation">{</span>
        img<span class="token operator">:</span> <span class="token string">&quot;image/cover.png&quot;</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
        dept<span class="token operator">:</span> <span class="token string">&quot;最简单、最便捷&quot;</span><span class="token punctuation">,</span>
        callback<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>bindCover<span class="token punctuation">,</span>
        historyConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
          show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          tip<span class="token operator">:</span> <span class="token string">&quot;加载更多提示框,可以直接使用组件的&quot;</span><span class="token punctuation">,</span>
          callback<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>bindLoadHistory<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        quickList<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;这里是jwchat，您想了解什么问题。&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;jwchat是最好的聊天组件&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;谁将烟焚散，散了纵横的牵绊；听弦断，断那三千痴缠。&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;长夏逝去。山野间的初秋悄然涉足。&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;江南风骨，天水成碧，天教心愿与身违。&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">7</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;总在不经意的年生。回首彼岸。纵然发现光景绵长。&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;外面的烟花奋力的燃着，屋里的人激情的说着情话&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">&quot;假如你是云，我就是雨，一生相伴，风风雨雨；&quot;</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">11</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            text<span class="token operator">:</span> <span class="token string">&quot;即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。&quot;</span><span class="token punctuation">,</span>
            id<span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            text<span class="token operator">:</span> <span class="token string">&quot; 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。&quot;</span><span class="token punctuation">,</span>
            id<span class="token operator">:</span> <span class="token number">13</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        maxlength<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      rightConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
        listTip<span class="token operator">:</span> <span class="token string">&quot;当前在线&quot;</span><span class="token punctuation">,</span>
        notice<span class="token operator">:</span>
          <span class="token string">&quot;【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。点个赞再走吧 &quot;</span><span class="token punctuation">,</span>
        filterTip<span class="token operator">:</span> <span class="token string">&quot;好友过滤&quot;</span><span class="token punctuation">,</span>
        list<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/three.jpeg&quot;</span><span class="token punctuation">,</span>
            id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/three.jpeg&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/three.jpeg&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;留恋人间不羡仙&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/one.jpeg&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">&quot;只盼流星不盼雨&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/two.jpeg&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      talk<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;快捷回复1&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;快捷回复2&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;快捷回复3&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;快捷回复4&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;快捷回复5&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;快捷回复6&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      quickConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
        nav<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;快捷回复&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;超级回复&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        showAdd<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        maxlength<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
        showHeader<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        showDeleteBtn<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      showRightBox<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      winBarConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
        active<span class="token operator">:</span> <span class="token string">&quot;win01&quot;</span><span class="token punctuation">,</span>
        width<span class="token operator">:</span> <span class="token string">&quot;180px&quot;</span><span class="token punctuation">,</span>
        listHeight<span class="token operator">:</span> <span class="token string">&quot;60px&quot;</span><span class="token punctuation">,</span>
        list<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token string">&quot;win00&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/cover.png&quot;</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
            dept<span class="token operator">:</span> <span class="token string">&quot;最简单、最便捷&quot;</span><span class="token punctuation">,</span>
            readNum<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token string">&quot;win01&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/three.jpeg&quot;</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;阳光明媚爱万物&quot;</span><span class="token punctuation">,</span>
            dept<span class="token operator">:</span> <span class="token string">&quot;沙拉黑油&quot;</span><span class="token punctuation">,</span>
            readNum<span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token string">&quot;win02&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/two.jpeg&quot;</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;只盼流星不盼雨&quot;</span><span class="token punctuation">,</span>
            dept<span class="token operator">:</span> <span class="token string">&quot;最后说的话&quot;</span><span class="token punctuation">,</span>
            readNum<span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token string">&quot;win03&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/one.jpeg&quot;</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;留恋人间不羡仙&quot;</span><span class="token punctuation">,</span>
            dept<span class="token operator">:</span> <span class="token string">&quot;这里可以放万物&quot;</span><span class="token punctuation">,</span>
            readNum<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            id<span class="token operator">:</span> <span class="token string">&quot;win04&quot;</span><span class="token punctuation">,</span>
            img<span class="token operator">:</span> <span class="token string">&quot;image/three.jpeg&quot;</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;阳光明媚爱万物&quot;</span><span class="token punctuation">,</span>
            dept<span class="token operator">:</span> <span class="token string">&quot;官方客服&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        callback<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>bindWinBar<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">/**
     * @description: 点击加载更多的回调函数
     * @param {*}
     * @return {*}
     */</span>
    <span class="token keyword">async</span> <span class="token function">bindLoadHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> history <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">i<span class="token punctuation">,</span> j</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          date<span class="token operator">:</span> <span class="token string">&quot;2020/05/20 23:19:07&quot;</span><span class="token punctuation">,</span>
          text<span class="token operator">:</span> <span class="token punctuation">{</span> text<span class="token operator">:</span> j <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          mine<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          name<span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
          img<span class="token operator">:</span> <span class="token string">&quot;image/three.jpeg&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> list <span class="token operator">=</span> history<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>taleList<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>taleList <span class="token operator">=</span> list<span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;加载历史&quot;</span><span class="token punctuation">,</span> list<span class="token punctuation">,</span> history<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">//  加载完成后通知组件关闭加载动画</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>config<span class="token punctuation">.</span>historyConfig<span class="token punctuation">.</span>tip <span class="token operator">=</span> <span class="token string">&quot;加载完成&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>jwChat<span class="token punctuation">.</span><span class="token function">finishPullDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">bindEnter</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
      <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>inputMsg
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>msg<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> msgObj <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/05/20 23:19:07&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> msg <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
        <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/three.jpeg&quot;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>msgObj<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">toolEvent</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'tools'</span><span class="token punctuation">,</span> type<span class="token punctuation">,</span> obj<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">talkEvent</span> <span class="token punctuation">(</span><span class="token parameter">play</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>play<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">rightClick</span><span class="token punctuation">(</span><span class="token parameter">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;rigth&quot;</span><span class="token punctuation">,</span> type<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">bindTalk</span><span class="token punctuation">(</span><span class="token parameter">play</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;talk&quot;</span><span class="token punctuation">,</span> play<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> key<span class="token punctuation">,</span> value <span class="token punctuation">}</span> <span class="token operator">=</span> play<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>key <span class="token operator">===</span> <span class="token string">&quot;navIndex&quot;</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>talk <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          p<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&quot;随机修改颜色 #&quot;</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">return</span> p<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>key <span class="token operator">===</span> <span class="token string">&quot;select&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>inputMsg <span class="token operator">=</span> value<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">bindEnter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>key <span class="token operator">===</span> <span class="token string">&quot;delIndex&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>talk<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> img <span class="token operator">=</span> <span class="token string">'https://www.baidu.com/img/flexible/logo/pc/result.png'</span>
    <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/04/25 21:19:07&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;起床不&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;留恋人间不羡仙&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/one.jpeg&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/04/25 21:19:07&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;audio data-src='https://www.w3school.com.cn/i/horse.mp3'/&gt;&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;只盼流星不盼雨&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/two.jpeg&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/04/25 21:19:07&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;img data-src='&quot;</span><span class="token operator">+</span>img<span class="token operator">+</span><span class="token string">&quot;'/&gt;&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;只盼流星不盼雨&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/two.jpeg&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/04/25 21:19:07&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;img data-src='../image/three.jpeg'/&gt;&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;只盼流星不盼雨&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/two.jpeg&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/04/16 21:19:07&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;video data-src='https://www.w3school.com.cn/i/movie.mp4' controls='controls' /&gt;&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/three.jpeg&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2021/03/02 13:14:21&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;留恋人间不羡仙&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/one.jpeg&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            system<span class="token operator">:</span> <span class="token punctuation">{</span>
              title<span class="token operator">:</span> <span class="token string">'在接入人工前，智能助手将为您首次应答。'</span><span class="token punctuation">,</span>
              subtitle<span class="token operator">:</span> <span class="token string">'猜您想问:'</span><span class="token punctuation">,</span>
              content<span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                  id<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">system1</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                  text<span class="token operator">:</span> <span class="token string">'组件如何使用'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                  id<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">system2</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                  text<span class="token operator">:</span> <span class="token string">'组件参数在哪里查看'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                  id<span class="token operator">:</span> <span class="token string">'system'</span><span class="token punctuation">,</span>
                  text<span class="token operator">:</span> <span class="token string">'我可不可把组件用在商业'</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/04/25 21:19:07&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;i class='el-icon-document-checked' style='font-size:2rem;'/&gt;&quot;</span><span class="token punctuation">,</span>
            <span class="token string">&quot;subLink&quot;</span><span class="token operator">:</span><span class="token punctuation">{</span>
              <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;a.txt&quot;</span><span class="token punctuation">,</span>
              <span class="token string">&quot;prop&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                underline<span class="token operator">:</span> <span class="token boolean">false</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;留恋人间不羡仙&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../image/one.jpeg&quot;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>taleList <span class="token operator">=</span> list
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</code></pre></div></details> <h2 id="参数配置"><a href="#参数配置" class="header-anchor">#</a> 参数配置</h2> <h3 id="attribute"><a href="#attribute" class="header-anchor">#</a> Attribute</h3> <table><thead><tr><th style="text-align:center;">参数</th> <th style="text-align:center;">说明</th> <th style="text-align:center;">类型</th> <th style="text-align:center;">可选值</th> <th style="text-align:center;">默认值</th></tr></thead> <tbody><tr><td style="text-align:center;">v-model</td> <td style="text-align:center;">输入框中的文字</td> <td style="text-align:center;">String</td> <td style="text-align:center;">-</td> <td style="text-align:center;">&quot;&quot;</td></tr> <tr><td style="text-align:center;">taleList</td> <td style="text-align:center;">会话内容</td> <td style="text-align:center;">Array</td> <td style="text-align:center;">-</td> <td style="text-align:center;">[]</td></tr> <tr><td style="text-align:center;">toolConfig</td> <td style="text-align:center;">工具栏配置</td> <td style="text-align:center;">Object</td> <td style="text-align:center;">-</td> <td style="text-align:center;">{}</td></tr> <tr><td style="text-align:center;">width</td> <td style="text-align:center;">JwChat界面框宽度</td> <td style="text-align:center;">string</td> <td style="text-align:center;">-</td> <td style="text-align:center;">750px</td></tr> <tr><td style="text-align:center;">height</td> <td style="text-align:center;">JwChat界面框高度</td> <td style="text-align:center;">string</td> <td style="text-align:center;">-</td> <td style="text-align:center;">570px</td></tr> <tr><td style="text-align:center;">config</td> <td style="text-align:center;">聊天组件基础配置</td> <td style="text-align:center;">Object</td> <td style="text-align:center;">-</td> <td style="text-align:center;">{}</td></tr> <tr><td style="text-align:center;">scrollType</td> <td style="text-align:center;">滚动类型</td> <td style="text-align:center;">String</td> <td style="text-align:center;">scroll (滚动到最新消息)</td> <td style="text-align:center;">noroll (停留当期位置)</td></tr> <tr><td style="text-align:center;">showRightBox</td> <td style="text-align:center;">显示右边内容</td> <td style="text-align:center;">Boolean</td> <td style="text-align:center;">false</td> <td style="text-align:center;">true</td></tr> <tr><td style="text-align:center;">winBarConfig</td> <td style="text-align:center;">多窗口配置</td> <td style="text-align:center;">Object</td> <td style="text-align:center;">-</td> <td style="text-align:center;">{}</td></tr> <tr><td style="text-align:center;">placeholder</td> <td style="text-align:center;">输入框占位符</td> <td style="text-align:center;">string</td> <td style="text-align:center;">-</td> <td style="text-align:center;">'请输入内容...'</td></tr></tbody></table> <h3 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>enter</td> <td>输入框点击就发送或者回车触发的事件</td> <td>输入的原始数据</td></tr> <tr><td>clickTalk</td> <td>点击聊天框列中的用户和昵称触发事件</td> <td>当前对话数据</td></tr></tbody></table> <h3 id="slot"><a href="#slot" class="header-anchor">#</a> Slot</h3> <table><thead><tr><th>name</th> <th>说明</th></tr></thead> <tbody><tr><td>header</td> <td>头部自定义插槽</td></tr> <tr><td>-</td> <td>右侧自定义插槽(不需要 name 属性)</td></tr> <tr><td>tools</td> <td>工具栏自定义插槽</td></tr> <tr><td>enter</td> <td>舍弃组件输入框，用户自定义插槽</td></tr> <tr><td>downBtn</td> <td>下拉按钮自定义插槽</td></tr> <tr><td>enterBtn</td> <td>发送按钮自定义插槽</td></tr> <tr><td>talkItem</td> <td>对话框自定义插槽</td></tr> <tr><td>winBarBtn</td> <td>删除按钮自定义插槽</td></tr></tbody></table> <h3 id="config-说明"><a href="#config-说明" class="header-anchor">#</a> <code>config</code> 说明</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  img<span class="token operator">:</span> <span class="token string">'../image/cover.png'</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">'JwChat'</span><span class="token punctuation">,</span>
  dept<span class="token operator">:</span> <span class="token string">'最简单、最便捷'</span><span class="token punctuation">,</span>
  callback<span class="token operator">:</span> <span class="token function">bindCover</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'header'</span><span class="token punctuation">,</span> event<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  historyConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    tip<span class="token operator">:</span> <span class="token string">'滚动到顶时候显示的提示'</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 点击加载更多的回调函数
     * @param {*}
     * @return {*}
     */</span>
    callback<span class="token operator">:</span> <span class="token function">bindLoadHistory</span> <span class="token punctuation">(</span><span class="token parameter">done</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> history <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">i<span class="token punctuation">,</span> j</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token string">&quot;date&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2020/05/20 23:19:07&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;text&quot;</span><span class="token operator">:</span> j <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;mine&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;JwChat&quot;</span><span class="token punctuation">,</span>
          <span class="token string">&quot;img&quot;</span><span class="token operator">:</span> <span class="token string">&quot;image/three.jpeg&quot;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">let</span> list <span class="token operator">=</span> history<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> list
      <span class="token comment">//  加载完成后通知组件关闭加载动画</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>config<span class="token punctuation">.</span>historyConfig<span class="token punctuation">.</span>tip <span class="token operator">=</span> <span class="token string">&quot;加载完成&quot;</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 组件完成加载后需要需要告知组件 下列方法任选一种</span>
        <span class="token comment">// 1.直接调用 done</span>
        <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token comment">// 2.直接使用组件方法</span>
        <span class="token comment">// this.$refs.jwChat.finishPullDown();</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> 
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  quickList<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'这里是jwchat，您想了解什么问题。'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'jwchat是最好的聊天组件'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'谁将烟焚散，散了纵横的牵绊；听弦断，断那三千痴缠。'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'长夏逝去。山野间的初秋悄然涉足。'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'江南风骨，天水成碧，天教心愿与身违。'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'总在不经意的年生。回首彼岸。纵然发现光景绵长。'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'外面的烟花奋力的燃着，屋里的人激情的说着情话'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'假如你是云，我就是雨，一生相伴，风风雨雨；'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">' 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  maxlength<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> 
<span class="token punctuation">}</span>
</code></pre></div><h3 id="toolconfig-说明"><a href="#toolconfig-说明" class="header-anchor">#</a> <code>toolConfig</code> 说明</h3> <p><strong>具体请查看 <code>chat</code> 组件介绍</strong></p> <h3 id="winbarconfig-说明"><a href="#winbarconfig-说明" class="header-anchor">#</a> <code>winBarConfig</code> 说明</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  active<span class="token operator">:</span> <span class="token string">'win00'</span><span class="token punctuation">,</span> <span class="token comment">// 当前选中</span>
  width<span class="token operator">:</span> <span class="token string">'160px'</span><span class="token punctuation">,</span> <span class="token comment">// 宽度大小</span>
  listHeight<span class="token operator">:</span> <span class="token string">'60px'</span><span class="token punctuation">,</span> <span class="token comment">// 单个高度</span>
  list<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span>
    id<span class="token operator">:</span> <span class="token string">'win00'</span><span class="token punctuation">,</span>
    img<span class="token operator">:</span> <span class="token string">'/image/cover.png'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'JwChat'</span><span class="token punctuation">,</span>
    dept<span class="token operator">:</span> <span class="token string">'最简单、最便捷'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    id<span class="token operator">:</span> <span class="token string">'win01'</span><span class="token punctuation">,</span>
    img<span class="token operator">:</span> <span class="token string">'/image/three.jpeg'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'阳光明媚爱万物'</span><span class="token punctuation">,</span>
    dept<span class="token operator">:</span> <span class="token string">'沙拉黑油'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    id<span class="token operator">:</span> <span class="token string">'win02'</span><span class="token punctuation">,</span>
    img<span class="token operator">:</span> <span class="token string">'/image/two.jpeg'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'只盼流星不盼雨'</span><span class="token punctuation">,</span>
    dept<span class="token operator">:</span> <span class="token string">'最后说的话'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    id<span class="token operator">:</span> <span class="token string">'win03'</span><span class="token punctuation">,</span>
    img<span class="token operator">:</span> <span class="token string">'/image/one.jpeg'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'留恋人间不羡仙'</span><span class="token punctuation">,</span>
    dept<span class="token operator">:</span> <span class="token string">'这里可以放万物'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    id<span class="token operator">:</span> <span class="token string">'win04'</span><span class="token punctuation">,</span>
    img<span class="token operator">:</span> <span class="token string">'/image/three.jpeg'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'阳光明媚爱万物'</span><span class="token punctuation">,</span>
    dept<span class="token operator">:</span> <span class="token string">'官方客服'</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  callback<span class="token operator">:</span> <span class="token punctuation">(</span>play <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>type<span class="token punctuation">,</span> data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">=</span> play
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>type<span class="token operator">===</span><span class="token string">'winBar'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> dept<span class="token punctuation">,</span> name<span class="token punctuation">,</span> img <span class="token punctuation">}</span> <span class="token operator">=</span> data
      <span class="token keyword">this</span><span class="token punctuation">.</span>winBarConfig<span class="token punctuation">.</span>active <span class="token operator">=</span> id
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/9/21 11:08:42</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/jwchatdoc/component/chat.html" class="prev">
        基础组件 Chat
      </a></span> <span class="next"><a href="/jwchatdoc/component/rightbox.html">
        右边栏-仿QQ群
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/jwchatdoc/assets/js/app.2f005bd9.js" defer></script><script src="/jwchatdoc/assets/js/2.0a6120b0.js" defer></script><script src="/jwchatdoc/assets/js/5.cab4c999.js" defer></script>
  </body>
</html>
